<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：引入vue.js -->
    <!-- vue框架对外暴露了一个构造函数【类】Vue构造函数 function Vue(){}-->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 第二部：准备容器 -->
    <div id="root">
        <!-- 展示动态数据 ,要用双大花括号-->
        <h2>您好，{{name}}</h2>
    </div>

    <script>
        //Vue对外暴露一个构造函数Vue
        // Vue的实例一般叫做VM
        // new Vue构造函数的时候需要传递一个【配置对象】
        const VM = new Vue({
            el:"#root",//el的属性值一般是字符串类型的css选择器，它的作用是VM与容器进行关联
            data:{//data的属性值一般是对象，它的作用是给实例对象VM添加一些属性
                name:'浩哥'
            }
        });
        console.log(VM);
        /* 
        VM：Vue类的实例，数据可以和容器进行关联
        VM实例属性的属性值发生变化，视图上的数据就跟着变化
        数据变化跟着视图变化
        注意：VM身上的属性是【响应式数据】，数据发生变化，视图跟这变化！！！
        */

    </script>
</body>

</html>